import React from 'react'

interface RadioProps {
  name: string
  value: string
  label: string
  checked?: boolean
  onChecked: (val: any) => void
}

function Radio(props: RadioProps) {
  return (
    <>
      <input
        className='radio'
        type='radio'
        name={props.name}
        value={props.value}
        id={`${props.name}-${props.value}`}
        style={{display: 'none'}}
        defaultChecked={props.checked}
        onChange={e => {
          props.onChecked(e.target.value)
        }}
      />
      <label className='label' htmlFor={`${props.name}-${props.value}`}>{props.label}</label>
    </>
  )
}

export default Radio
